<script lang="ts" setup>
import { ref } from 'vue';
import type { FormInstance } from '@arco-design/web-vue/es/form';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  id: {
    type: String,
    default: '',
  },
});

interface InformationItem {
  informationTitle: string;
  informationId: string;
}

const loading = ref(false);
const formData = ref({
  informationIdList: [],
});
const listing = ref<InformationItem[]>([]);
const formRef = ref<FormInstance>();
const { success } = useNotification();
const { t } = useI18n();

const getJournalism = async () => {
  const { isSuccess, data } = await $fetch('/admin/atomgitPopSpecialColumn/getInfomationPage', {
    method: 'post',
    loadingStatus: loading,
    data: {
      columnId: props.id,
    },
  });

  if (isSuccess) {
    listing.value = data
  }
}

getJournalism();

const dialogClickButton = async (button: string) => {
  if (button !== 'ok') {
    return;
  }

  const res = await formRef.value?.validate();

  if (res) {
    return false;
  }

  const { isSuccess } = await $fetch('/admin/atomgitPopSpecialColumn/addSpecialInformation', {
    method: 'post',
    data: {
      columnId: props.id,
      ...formData.value,
    },
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
  }

  return isSuccess;
}

defineExpose({
  dialogClickButton,
});
</script>

<template>
  <AForm ref="formRef" auto-label-width scroll-to-first-error :model="formData">
    <ASpin :loading="loading">
      <AFormItem
        field="informationIdList"
        :label="$t('settings.view.column.detail.add.column1')"
        :rules="[{ required: true, message: $t('settings.notification.requiredSelect') }]"
      >
        <ASelect v-model="formData.informationIdList" multiple tag-nowrap>
          <AOption v-for="item in listing" :key="item.informationId" :value="item.informationId">
            {{ item.informationTitle }}
          </AOption>
        </ASelect>
      </AFormItem>
    </ASpin>
  </AForm>
</template>

<style lang="scss" scoped>
</style>
